<template>
    <div class="menu-container flex flex-col">
        <a-card class="mb-2.5">            
            <common-form
                :model="state.queryForm"
                name="menu-form"
                @query="handleQuery"
                @add="handleAdd"
                @reset="handleReset"
            >
                <a-form-item
                    label="租户"
                    name="tenantId"
                    style="width: 250px;"
                >
                    <a-select v-model:value="state.queryForm.tenantId" placeholder="">
                        <a-select-option
                            v-for="item in state.tenantList"
                            :key="item.value"
                            :value="item.value">
                            {{item.label}}    
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item
                    label="菜单名称"
                    name="title"
                    class="w-1/2.5"
                >
                    <a-input v-model:value="state.queryForm.title"/>
                </a-form-item>
                <a-form-item
                    label="类型"
                    name="type"
                    style="width: 150px;"
                >
                    <a-select v-model:value="state.queryForm.type" placeholder="">
                        <template v-for="item in useMapDictList('MenuTypeEnum')" :key="item.value">
                            <a-select-option :value="item.value">{{ item.label }}</a-select-option>
                        </template>
                    </a-select>
                </a-form-item>
            </common-form>
        </a-card>
        <a-card class="flex-1 card-table">
            <common-table 
                :columns="columns" 
                :data="state.tableData"
                :pagination="false"
                :loading="state.loading"
            >
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'title'">
                        <!-- <component :is="record.icon"/> -->
                        <div class="flex items-center space-x-2">
                            <Icon :icon="record.icon" />
                            {{ record.title }}
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'type'">
                        <a-tag color="green" v-if="record.type ===1 ">目录</a-tag>
                        <a-tag color="cyan" v-else-if="record.type ===2">菜单</a-tag>
                        <a-tag color="blue"v-else-if="record.type ===3">按钮</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'status'">
                        <a-tag color="green" v-if="record.status ===1 ">启用</a-tag>
                        <a-tag color="red" v-else>停用</a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'row'">
                        <div style="cursor: pointer;">
                            <edit-record :row="record"/>
                        </div>
                        
                    </template>
                    <template v-if="column.dataIndex === 'operation'">
                        <a-button :icon="h(EditOutlined)" type="primary" ghost class="mr-1" @click="handleEdit(record)">编辑</a-button>
                        <a-popconfirm
                            title="确定删除?"
                            @confirm="handleDelete(record)"
                        >
                            <a-button :icon="h(DeleteOutlined)" danger>删除</a-button>
                        </a-popconfirm>
                    </template>
                </template>
            </common-table>
        </a-card>

        <edit-or-add-dialog
            ref="editOrAddDialogRef"
            :menuList="state.tableData"
            @handle-query="handleQuery"
        />
    </div>
</template>

<script setup lang="ts" name="sysMenu">
import { onMounted, reactive ,h,ref,onActivated} from 'vue';
import CommonForm from '@/components/common-form/index.vue'
import CommonTable from '@/components/common-table/index.vue'
import { apiSysMenuListGet } from '@/api/sys/sysMenu';
import type { ResType } from '@/api/types';
import type { StateType } from './type';
import {apiSysTenantListGet} from '@/api/sys/sysTenant'
import type { TenantListType } from '../onlineUser/type';
import {EditOutlined,DeleteOutlined} from '@ant-design/icons-vue'
import editRecord from '../../../components/self/edit-record-history.vue';
import editOrAddDialog from './components/editOrAddDialog.vue';
import Icon from '@/components/Iconify/index.vue'
import { apiSysMenuDelete } from '@/api/sys/sysMenu';
import { useMapDictList } from '@/hooks';
import { showMsg } from '@/utils';

// 定义组件名称
defineOptions({
    name: 'sysMenu'
})


const editOrAddDialogRef = ref<InstanceType<typeof editOrAddDialog>>()
const state =reactive<StateType>({
    queryForm:{
        tenantId:undefined,
        title:"",
        type:""
    },
    tenantList:[],
    tableData:[],
    loading:false
})

const columns = [
    {
        title: '菜单名称',
        dataIndex: 'title',
        key: 'title',
        align: 'left',
    },
    {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        align: 'center',
    },
    {
        title: '路由路径',
        dataIndex: 'path',
        key: 'path',
        align: 'center',
    },
    {
        title: '组件路径',
        dataIndex: 'component',
        key: 'component',
        align: 'center',
    },
    {
        title: '权限标识',
        dataIndex: 'permission',
        key: 'permission',
        align: 'center',
    },
    {
        title: '排序',
        dataIndex: 'orderNo',
        key: 'orderNo',
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
    },
    {
        title: '修改记录',
        dataIndex: 'row',
        key: 'row',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        fixed: 'right',
        width: 250,
    },
];

const handleEdit = (row:any)=>{
    console.log("菜单",row)
    editOrAddDialogRef.value?.handleOpen(row,'edit')
}

const handleAdd = () => {
    const data :any = { type: 2, isHide: false, isKeepAlive: true, isAffix: false, isIframe: false, tenantId: undefined, status: 1, orderNo: 100 };
	data.tenantId = state.queryForm.tenantId;
    editOrAddDialogRef.value?.handleOpen({...data},'add')
}

const handleReset = async() => {
    state.queryForm = {
        tenantId:state.tenantList[0].value || undefined,
        title:"",
        type:""
    }
    await handleQuery()
}

const handleQuery = async ()=>{
    state.loading = true
    const newParams = Object.assign({},state.queryForm)
    const res = await apiSysMenuListGet({...newParams}) as ResType<any[]>
    state.tableData = res.data.result
    const addKey = (data:any[])=>{
        for (let i = 0; i < data.length; i++) {
            const item = data[i];
            item.key = item.path
            if(Array.isArray(item.children) && item.children.length > 0){
                addKey(item.children)
            }
            // 防止某项无子项时，但存在children属性，会存在展开字体图标
            if(Reflect.has(item,'children') && item.children.length ==0){
                Reflect.deleteProperty(item,'children')
            }
        }
    }
    addKey(state.tableData)
    state.loading = false
}

const initFormQuery = async()=>{
    const res = await apiSysTenantListGet() as ResType<TenantListType>
    state.tenantList = res.data.result
    state.queryForm.tenantId = res.data.result[0].value
}

const handleDelete = async(row:any)=>{
    await apiSysMenuDelete({id:row.id})
    await handleQuery()
    showMsg('删除成功','success')
}

onMounted(async()=>{
    await initFormQuery()
    await handleQuery()
})
</script>

<style lang="scss" scoped>
:deep(.ant-btn >span) {
    display:inline-flex!important;
}
.menu-container{
    .card-table{
        :deep(.ant-card-body){
            height: 100%;
        }
    }
}

:deep(.ant-table-cell-fix-right){
    // right: 0 !important;
}
</style>